<template>
	<el-card shadow="never" header="语言主题">
		<el-form ref="form" label-width="120px" style="margin-top:20px;">
			<el-form-item :label="$t('user.nightmode')">
				<el-switch v-model="config.dark" inline-prompt active-icon="el-icon-moon" inactive-icon="el-icon-sunny" active-value="true" inactive-value="false"></el-switch>
				<div class="el-form-item-msg">{{ $t('user.nightmode_msg') }}</div>
			</el-form-item>
			<el-form-item label="主题颜色">
				<el-color-picker v-model="config.theme" :predefine="colorList">></el-color-picker>
			</el-form-item>
			<el-form-item :label="$t('user.language')">
				<el-select v-model="config.language">
					<el-option label="简体中文" value="zh-cn"></el-option>
					<el-option label="English" value="en"></el-option>
				</el-select>
				<div class="el-form-item-msg">{{ $t('user.language_msg') }}</div>
			</el-form-item>
			<el-form-item label="框架布局">
				<el-select v-model="config.configLayout" placeholder="请选择">
					<el-option label="默认" value="default"></el-option>
					<el-option label="通栏" value="header"></el-option>
					<el-option label="经典" value="menu"></el-option>
					<el-option label="功能坞" value="dock"></el-option>
				</el-select>
			</el-form-item>
			<el-form-item label="门户选择">
				<el-select v-model="config.portalId" placeholder="请选择">
					<el-option v-for="item in portalIdList" :label="item.label" :value="item.value" :key="item.value"></el-option>
				</el-select>
			</el-form-item>
			<el-form-item label="标签栏">
				<el-switch v-model="config.layoutTags" active-value="1" inactive-value="0"></el-switch>
			</el-form-item>
			<el-form-item>
				<el-button type="primary" @click="updateUserInfo">保存</el-button>
			</el-form-item>
		</el-form>
	</el-card>
</template>

<script>
	import colorTool from '@/utils/color'

	export default {
		data() {
			return {
				portalIdList:[{label:'默认门户',value:'0'}],
				colorList: ['#409EFF', '#009688', '#536dfe', '#ff5c93', '#c62f2f', '#fd726d'],
				config: {
					portalId:this.$TOOL.data.get('USER_INFO').portalId,
					configLayout: this.$TOOL.data.get('USER_INFO').configLayout,
					layoutTags: "",
					language: this.$TOOL.data.get('USER_INFO').language,
					dark: this.$TOOL.data.get('USER_INFO').dark||false,
					theme: this.$TOOL.data.get('USER_INFO').theme
				}
			}
		},
		mounted() {
			this.getMySysPortalForSelect();
			this.config.layoutTags = this.$TOOL.data.get('USER_INFO').layoutTags
		},
		methods:{
			async getMySysPortalForSelect(){
				var res = await this.$API.system.sysPortal.getMySysPortalForSelect.get();
				if (res.code == 200) {
					this.portalIdList=this.portalIdList.concat(res.data);
				} else {
					this.$alert(res.message, "提示", {type: 'error'})
				}
			},
			async updateUserInfo(){
				if(this.config.theme==null)
				{
					this.config.theme = '#409EFF';
				}
				var res = await this.$API.system.user.update.post(this.config);
				if (res.code == 200) {
					if(this.config.dark=="true"){
						document.documentElement.classList.add("dark")
						this.$TOOL.data.set("APP_DARK", true)
					}else{
						document.documentElement.classList.remove("dark")
						this.$TOOL.data.remove("APP_DARK")
					}
					document.documentElement.style.setProperty('--el-color-primary', this.config.theme);
					for (let i = 1; i <= 9; i++) {
						document.documentElement.style.setProperty(`--el-color-primary-light-${i}`, colorTool.lighten(this.config.theme,i/10));
					}
					for (let i = 1; i <= 9; i++) {
						document.documentElement.style.setProperty(`--el-color-primary-dark-${i}`, colorTool.darken(this.config.theme,i/10));
					}
					this.$TOOL.data.set("APP_COLOR", this.config.theme);
					this.$i18n.locale = this.config.language;
					this.$TOOL.data.set("APP_LANG", this.config.language);
					this.$TOOL.data.get('USER_INFO').configLayout=this.config.configLayout;
					this.$TOOL.data.get('USER_INFO').layoutTags=this.config.layoutTags;
					this.$store.commit("SET_layout", this.config.configLayout)
					this.$store.commit("TOGGLE_layoutTags",this.config.layoutTags)
					this.$alert("修改成功后，请重新登录！", "修改成功", {
						type: 'success',
						center: true
					}).then(() => {
						this.$router.replace({
							path: '/login'
						})
					}).catch(() => {})
				} else {
					this.$alert(res.message, "提示", {type: 'error'})
				}
			}
		}
	}
</script>

<style>
</style>
